<template>
    <div id="order-details">
        <header>
            <section class="pt20"><p class="f18">{{statusOrder.payStatus}}</p><p class="tr f14">{{statusOrder.status}}</p></section>
            <p class="f12" v-if="statusOrder.status === '已完成'">订单已签收</p>
            <p class="f12 mt5" v-else>剩余23小时15分自动签收</p>
        </header>
        <main>
            <header>
                <section>
                    <h1 class="tc f16" style="color:#FF5001;">{{statusOrder.orderId}}</h1>
                    <p class="tc f15" style="color: #9D9C9C;">下单时间: 2018-10-09 09:45:36 共{{goods.goodMounts}}件商品</p>
                </section>
            </header>
            <div>
                <span style="border-radius: 0 5px 5px 0;"></span>
                <p></p>
                <span style="border-radius: 5px 0 0 5px;"></span>
            </div>
            <dl>
                <dd v-for="(good, item) in goods" :key="good.index" v-if="item < showGoods">
                    <img :src="good.imgs"/>
                    <section class="pl10 tl">
                        <h1>{{good.nam}}</h1>
                        <p>{{good.selectGuige}}</p>
                    </section>
                    <section class="tr" style="flex: 1;">
                        <h1><span>￥</span>{{good.originalprice}}</h1>
                        <p><span>x</span>{{good.counts}}</p>
                    </section>
                </dd>
            </dl>
            <aside @click="showMore">
                <i class="iconfont">{{text}}</i>
            </aside>
            <section class="cell-list pl13-pt13">
                <div class="flex align-center ">
                  <p class="flex1 f15">优惠券</p><p class="f14"><span class="f9">￥</span>10</p>
                </div>
                <div class="flex align-center">
                  <p class="flex1 f15">运费</p><p class="f14"><span class="f9">￥</span>15</p>
                </div>
                <div class="flex align-center">
                  <p class="flex1 f15">总计</p><p class="f14" style="color: #F95318"><span class="f9">￥</span>33.44</p>
                </div>
                <div class="flex align-center">
                  <p class="flex1 f15">支付方式</p><p class="f14"><span class="iconfont f20" style= "color:#41B962; vertical-align: middle">&#xe66e;</span>微信支付</p>
                </div>
            </section>
            <section class="cell-list mt5">
                <h2 class="tc">配送信息</h2>
                <i-cell title="下单门店" value="凯里黔山西红柿基地">
                </i-cell>
                <i-cell title="配送方式" value="送货上门">
                </i-cell>
                <i-cell title="收货地址" value="花果园M区重庆小火锅 (18685381675)">
                </i-cell>
                <p class="tr f15">
                    贵州省 贵阳市 南明区 花果园社区服务中心花果园M区10栋108号
                </p>
            </section>
            <section class="cell-list mt5" style=" border-radius: 0 0 5px 5px;">
                <h2 class="tc">备注</h2>
                <p class="f15" style="padding: 10px 20px;color: #A5A5A5;">请在2018年10月25日10:30-17:30时间段内配送商品便顺利验收商品。</p>
            </section>
        </main>
        <footer v-if="statusOrder.status === '已完成'">
            <i-button inline shape="circle" i-class="order-button">删除</i-button>
            <i-button type="success" inline shape="circle" i-class="order-button">再次购买</i-button>
        </footer>
        <footer v-else-if="statusOrder.status === '待付款'">
            <i-button type="default" inline shape="circle" i-class="order-button">取消</i-button>
            <i-button type="default" inline shape="circle" i-class="order-button">代付</i-button>
            <i-button type="success" inline shape="circle" i-class="order-button">付款(￥9525.05)</i-button>
        </footer>
        <footer v-else>
            <i-button @click="afterSale" inline shape="circle" i-class="order-button">售后</i-button>
            <i-button type="success" inline shape="circle" i-class="order-button">确认签收</i-button>
        </footer>
    </div>
</template>

<script type="ECMAScript 6">
    import listGoods from '@/components//list-goods';
    let datas = require('../../../../../data');
    export default {
        name: 'my-order-details',
        components: {
            listGoods
        },
        data () {
            return {
                goods: '',
                statusOrder: '',
                showGoods: 3,
                isShow: false,
                text: ''
            };
        },
        onShow () {
          this.statusOrder =  JSON.parse(this.$root.$mp.query.id);
          console.log(this.statusOrder);
        },
        methods: {
            showMore () {
                this.isShow = !this.isShow;
                this.showGoods = this.isShow ? 3 : this.goods.length;
                this.text = this.isShow ? '' : '';
            },
            afterSale () {
              let url = '../sale-after/main';
                mpvue.navigateTo({ url });
            }
        },
        created () {
            this.goods = datas.goods;
        }
    };
</script>

<style lang="stylus" scoped>
    #order-details
      padding-bottom: 60px;
      &>header
        height 130px; background url("") no-repeat center; padding 0 13px; color #fff;
        &>section
          display flex; align-items center;
          p
           flex 1;
      main
        padding 0 13px; margin-top -13%;
        &>header
            min-height 80px; background #fff; border-radius 5px 5px 0 0;
            &>section
                padding-top 18px;
        &>div
            display flex; align-items center; height 10px; background #fff;
            &>span
                display inline-block; width 5px; height 10px; background #F3F4F6;
            &>p
                flex 1; height 1px;background #F3F4F6;
        dl
            padding 0 13px; background #fff;
            dd
                display flex; border-bottom 1px solid #E9E9E9; padding 10px 0;
                img
                    width 50px;height 50px;
                section
                    h1
                        font-size 14px;
                        span
                            font-size 9px;
                    p
                        margin-top 8px; font-size 12px; color #A2A2A2;
                        span
                            font-size 9px;
            dd:last-of-type
               border-bottom-color transparent;
        aside
          text-align center; display block; height 40px; border-top 1px solid #E9E9E9; background #fff;
          i
            line-height 40px;
        &>section
            margin-top 5px; background #fff;
            &>div
              height 40px; border-bottom 1px solid #f2f2f2;
            &>div:last-of-type
              border-color transparent;
            &>h2
             margin 0 10px; height 40px; line-height 40px;font-size 15px;border-bottom 1px solid #E9E9E9;
            &>p
             padding 0 10px 10px 100px; color #A6A6A6;
    footer
        position fixed; bottom 0; width:97%; padding 12px; background #fff; text-align right;border-top 1px solid #E9E9E9;
</style>

<style lang="stylus">
  .order-button
    margin 0 10px 0 0!important; height 30px!important; line-height 30px!important; min-width 70px!important;
</style>
